.tools {
  &__title {
    margin: rem(70) 0 rem(10) 0;
    color: var(--a-mainAccent);
    user-select: none;

    @media screen and (min-width: $tablet) {
      margin: rem(80) 0 rem(50) 0;
    }
  }
  &__subtitle {
    margin-bottom: rem(12);
    color: var(--a-headerText);
    user-select: none;
  }

  &__header {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: rem(100);

    @media screen and (min-width: $tablet) {
      flex-direction: row;
    }

    &-title {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin-right: 0;
      margin-bottom: rem(20);
      padding: rem(10) rem(20);
      color: var(--a-mainAccent);
      text-transform: uppercase;
      border-right: 0;
      border-bottom: rem(1) solid var(--a-borderMain);

      @media screen and (min-width: $tablet) {
        margin-right: rem(20);
        width: rem(180);
        margin-bottom: 0;
        border-right: rem(1) solid var(--a-borderMain);
        border-bottom: 0;
      }
    }

    &-list {
      display: flex;
      gap: rem(30);
      flex-wrap: wrap;

      @media screen and (min-width: $mobile) {
      }

      @media screen and (min-width: $tablet) {
      }
    }
    &-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      padding: 0 rem(10);
    }

    &-img-wrapper {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: rem(80);
      height: rem(40);
      margin-bottom: rem(8);

      .nuxt-icon {
        display: flex;
        width: 100%;
        height: 100%;

        svg {
          object-fit: cover;
          width: auto;
          height: 100%;
        }
      }
    }

    &-link-group {
      display: flex;
      row-gap: rem(8);
      column-gap: rem(8);
      user-select: none;

      @media screen and (min-width: $mobile) {
        row-gap: rem(12);
        column-gap: rem(12);
      }
    }
    &-sourse {
      display: flex;
      justify-content: center;
      align-items: center;
      min-width: rem(110);
      padding: rem(4) rem(12);
      color: var(--a-mainText);
      background-color: var(--a-mainBg);

      &:hover {
        background-color: var(--a-bgAccentLight);
      }
    }
    &-link {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: rem(4) rem(12);
      color: var(--a-white);
      background-color: var(--a-mainAccent);

      &:hover {
        background-color: var(--a-bgAccent);
      }
    }
  }

  &__content,
  &__section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
  }

  &__content {
    padding-left: 0;

    @media screen and (min-width: $tablet) {
      padding-left: rem(140);
    }
  }
  &__section {
    margin-bottom: rem(20);
    padding: rem(30) 0;
    border-top: rem(1) solid var(--a-borderLight);
    &-logo {
      width: auto;
      height: 100%;
      object-fit: cover;
    }

    &-plugin-block {
      display: flex;
      align-items: center;
      width: 100%;
      margin-bottom: rem(4);
      padding: rem(4) rem(8);
      background-color: var(--a-bgLight);

      @media screen and (min-width: $mobile) {
        padding: rem(4) rem(20);
      }
    }

    &-header {
      display: flex;
      align-items: center;
      align-self: stretch;
      flex: none;
      width: rem(110);
      margin-right: rem(10);
      border-right: rem(1) solid var(--a-borderMain);
      user-select: none;

      @media screen and (min-width: $mobile) {
        width: rem(130);
        margin-right: rem(12);
      }
    }

    &-list-plugin {
      display: flex;
      flex-wrap: wrap;
    }

    &-item-plugin {
      display: flex;
      align-items: center;
      margin: rem(8) rem(12);
      color: var(--a-mainAccent);
    }
  }

  &__logo-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: rem(140);
    height: rem(44);
    margin-bottom: rem(12);

    .nuxt-icon {
      display: flex;
      width: 100%;
      height: 100%;

      svg {
        object-fit: cover;
        width: auto;
        height: 100%;
      }
    }
  }
}
